<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="">
		<meta name="author" content="Dashboard">
		<meta name="keyword" content="Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">
		<title>Dashio - Bootstrap Admin Template</title>
		<!-- Favicons -->
		<link rel="shortcut icon" href="#" />
		<!-- Bootstrap core CSS -->
		<link href="../lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
		<!--external css-->
		<link href="../lib/font-awesome/css/font-awesome.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/zabuto_calendar.css">
		<link rel="stylesheet" type="text/css" href="../lib/gritter/css/jquery.gritter.css" />
		<!-- Custom styles for this template -->
		<link href="../css/style.css" rel="stylesheet">
		<link href="../css/style-responsive.css" rel="stylesheet">
		<script src="../lib/chart-master/Chart.js"></script>

		<!-- =======================================================
    Template Name: Dashio
    Template URL: https://templatemag.com/dashio-bootstrap-admin-template/
    Author: TemplateMag.com
    License: https://templatemag.com/license/
  ======================================================= -->
	</head>

	<body>
		<section id="container">
			<!-- **********************************************************************************************************************************************************
        TOP BAR CONTENT & NOTIFICATIONS
        *********************************************************************************************************************************************************** -->
			<!--header start-->
			<header class="header black-bg">
				<div class="sidebar-toggle-box">
					<div class="fa fa-bars tooltips" data-placement="right" data-original-title="Toggle Navigation"></div>
				</div>
				<!--logo start-->
				<a href="index.jsp" class="logo"><b>BES<span>Manage</span></b></a>
				<!--logo end-->
				<div class="nav notify-row" id="top_menu">
					<!--  notification start -->
					<ul class="nav top-menu">
						<!-- settings start -->
						<li class="dropdown">
							<a data-toggle="dropdown" class="dropdown-toggle" href="index.jsp#">
								<i class="fa fa-tasks"></i>
								<span class="badge bg-theme">4</span>
							</a>
							<ul class="dropdown-menu extended tasks-bar">
								<div class="notify-arrow notify-arrow-green"></div>
								<li>
									<p class="green">You have 4 pending tasks</p>
								</li>
								<li>
									<a href="index.jsp#">
										<div class="task-info">
											<div class="desc">Dashio Admin Panel</div>
											<div class="percent">40%</div>
										</div>
										<div class="progress progress-striped">
											<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
												<span class="sr-only">40% Complete (success)</span>
											</div>
										</div>
									</a>
								</li>
								<li>
									<a href="index.jsp#">
										<div class="task-info">
											<div class="desc">Database Update</div>
											<div class="percent">60%</div>
										</div>
										<div class="progress progress-striped">
											<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
												<span class="sr-only">60% Complete (warning)</span>
											</div>
										</div>
									</a>
								</li>
								<li>
									<a href="index.jsp#">
										<div class="task-info">
											<div class="desc">Product Development</div>
											<div class="percent">80%</div>
										</div>
										<div class="progress progress-striped">
											<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
												<span class="sr-only">80% Complete</span>
											</div>
										</div>
									</a>
								</li>
								<li>
									<a href="index.jsp#">
										<div class="task-info">
											<div class="desc">Payments Sent</div>
											<div class="percent">70%</div>
										</div>
										<div class="progress progress-striped">
											<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%">
												<span class="sr-only">70% Complete (Important)</span>
											</div>
										</div>
									</a>
								</li>
								<li class="external">
									<a href="#">See All Tasks</a>
								</li>
							</ul>
						</li>
						<!-- settings end -->
						<!-- inbox dropdown start-->
						<li id="header_inbox_bar" class="dropdown">
							<a data-toggle="dropdown" class="dropdown-toggle" href="index.jsp#">
								<i class="fa fa-envelope-o"></i>
								<span class="badge bg-theme">5</span>
							</a>
							<ul class="dropdown-menu extended inbox">
								<div class="notify-arrow notify-arrow-green"></div>
								<li>
									<p class="green">You have 5 new messages</p>
								</li>
								<li>
									<a href="index.jsp#">
										<span class="photo"><img alt="avatar" src="#"></span>
										<span class="subject">
                  <span class="from">Zac Snider</span>
										<span class="time">Just now</span>
										</span>
										<span class="message">
                  Hi mate, how is everything?
                  </span>
									</a>
								</li>
								<li>
									<a href="index.jsp#">
										<span class="photo"><img alt="avatar" src="#"></span>
										<span class="subject">
                  <span class="from">Divya Manian</span>
										<span class="time">40 mins.</span>
										</span>
										<span class="message">
                  Hi, I need your help with this.
                  </span>
									</a>
								</li>
								<li>
									<a href="index.jsp#">
										<span class="photo"><img alt="avatar" src="#"></span>
										<span class="subject">
                  <span class="from">Dan Rogers</span>
										<span class="time">2 hrs.</span>
										</span>
										<span class="message">
                  Love your new Dashboard.
                  </span>
									</a>
								</li>
								<li>
									<a href="index.jsp#">
										<span class="photo"><img alt="avatar" src="#"></span>
										<span class="subject">
                  <span class="from">Dj Sherman</span>
										<span class="time">4 hrs.</span>
										</span>
										<span class="message">
                  Please, answer asap.
                  </span>
									</a>
								</li>
								<li>
									<a href="index.jsp#">See all messages</a>
								</li>
							</ul>
						</li>
						<!-- inbox dropdown end -->
						<!-- notification dropdown start-->
						<li id="header_notification_bar" class="dropdown">
							<a data-toggle="dropdown" class="dropdown-toggle" href="index.jsp#">
								<i class="fa fa-bell-o"></i>
								<span class="badge bg-warning">7</span>
							</a>
							<ul class="dropdown-menu extended notification">
								<div class="notify-arrow notify-arrow-yellow"></div>
								<li>
									<p class="yellow">You have 7 new notifications</p>
								</li>
								<li>
									<a href="index.jsp#">
										<span class="label label-danger"><i class="fa fa-bolt"></i></span> Server Overloaded.
										<span class="small italic">4 mins.</span>
									</a>
								</li>
								<li>
									<a href="index.jsp#">
										<span class="label label-warning"><i class="fa fa-bell"></i></span> Memory #2 Not Responding.
										<span class="small italic">30 mins.</span>
									</a>
								</li>
								<li>
									<a href="index.jsp#">
										<span class="label label-danger"><i class="fa fa-bolt"></i></span> Disk Space Reached 85%.
										<span class="small italic">2 hrs.</span>
									</a>
								</li>
								<li>
									<a href="index.jsp#">
										<span class="label label-success"><i class="fa fa-plus"></i></span> New User Registered.
										<span class="small italic">3 hrs.</span>
									</a>
								</li>
								<li>
									<a href="index.jsp#">See all notifications</a>
								</li>
							</ul>
						</li>
						<!-- notification dropdown end -->
					</ul>
					<!--  notification end -->
				</div>
				<div class="top-menu">
					<ul class="nav pull-right top-menu">
						<li>
							<a class="logout" href="login.jsp">退出登录</a>
						</li>
					</ul>
				</div>
			</header>
			<!--header end-->
			<!-- **********************************************************************************************************************************************************
        MAIN SIDEBAR MENU
        *********************************************************************************************************************************************************** -->
			<!--sidebar start-->
			<aside>
				<div id="sidebar" class="nav-collapse ">
					<!-- sidebar menu start-->
					<ul class="sidebar-menu" id="nav-accordion">
						<!--管理员头像-->
						<p class="centered">
							<a href="profile.jsp"><img src="#" class="img-circle" width="80"></a>
						</p>
						<!--管理员名-->
						<h5 class="centered">Admin</h5>
						<li class="mt">
							<a class="active" href="index.jsp">
								<i class="fa fa-dashboard"></i>
								<span>用户数据分析</span>
							</a>
						</li>
						<li class="sub-menu">
							<a href="javascript:;">
								<i class="fa fa-desktop"></i>
								<span>用户管理</span>
							</a>
							<ul class="sub">
								<li>
									<a href="user-information.jsp">用户信息</a>
								</li>
								<li>
									<a href="adduser.jsp">添加用户</a>
								</li>
							</ul>
						</li>
						<li class="sub-menu">
							<a href="javascript:;">
								<i class="fa fa-tasks"></i>
								<span>车次管理</span>
							</a>
							<ul class="sub">
								<li>
									<a href="bus-information.jsp">车次信息</a>
								</li>
								<li>
									<a href="moment-information.jsp">时刻信息</a>
								</li>
								<li>
									<a href="addmoment.jsp">添加时刻表</a>
								</li>
								<li>
									<a href="addsite.jsp">添加车次</a>
								</li>
							</ul>
						</li>
						<li class="sub-menu">
							<a href="javascript:;">
								<i class="fa fa-th"></i>
								<span>站点管理</span>
							</a>
							<ul class="sub">
								<li>
									<a href="bussite-information.jsp">站点信息</a>
								</li>
								<li>
									<a href="addbussite.jsp">添加站点</a>
								</li>
							</ul>
						</li>

						<li class="sub-menu">
							<a href="javascript:;">
								<i class="fa fa-comments-o"></i>
								<span>公告栏管理</span>
							</a>
							<ul class="sub">
								<li>
									<a href="announcement.jsp">公告栏信息</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="google_maps.jsp">
								<i class="fa fa-map-marker"></i>
								<span>Google Maps </span>
							</a>
						</li>
					</ul>
					<!-- sidebar menu end-->
				</div>
				<!--sidebar start-->
			</aside>
			<!--sidebar end-->
			<!--main content start-->
			<section id="main-content">
				<section class="wrapper">
					<!-- row -->
        <div class="row mt">
          <div class="col-md-12">
            <div class="content-panel">
              <table class="table table-striped table-advance table-hover">
                <h4><i class="fa fa-angle-right"></i> 用户列表</h4>
                <hr>
                <thead>
                  <tr>
                    <th>用户编号</th>
                    <th>用户姓名</th>
                    <th>用户密码</th>
                    <th>手机号</th>
                    <th>性别</th>
                    <th>用户等级</th>
                    <th>用户状态</th>
                    <th><i class=" fa fa-edit"></i>操作</th>
                  </tr>
                </thead>
                <tbody id="userListBody">
                 
                </tbody>
              </table>
              <!-- 分页信息 -->
					<div id="pageStyle"></div>
					<!-- 分页栏 -->
					<div class="col-md-12 text-center">
					<ul class="pagination" id="pageItem">
						
			  </ul>
            </div>
            <!-- /content-panel -->
          </div>
          <!-- /col-md-12 -->
        </div>
        <!-- /row -->
				</section>
			</section>
			<!--main content end-->
			<!--footer start-->
			<footer class="site-footer">
				<div class="text-center">
					<p>&copy; Copyrights <strong>Dashio</strong>. All Rights Reserved</p>
					<div class="credits"> Created with Dashio template by
						<a href="https://templatemag.com/">TemplateMag</a>
					</div>
					<a href="index.jsp#" class="go-top">
						<i class="fa fa-angle-up"></i>
					</a>
				</div>
			</footer>
			<!--footer end-->
		</section>
		
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">用户修改</h4>
				</div>
				<form class="form-horizontal" role="form">
				 <div class="modal-body">
				  <div class="form-group ">
                    <label for="lastname" class="control-label col-lg-4">用户编号 </label>
                    <div class="col-lg-6">
                      <input class="form-control" id="userid" name="userid" type="text" readonly="readonly"/>
                    </div>
                  </div>
				  <div class="form-group">
                     	<label for="firstname" class="control-label col-lg-4">用户名</label>
                    <div class="col-lg-6">
                      <input class=" form-control" id="username" name="username" type="text"/>
                    </div>
                  </div>
                  <div class="form-group ">
                    <label for="password" class="control-label col-lg-4">密码</label>
                    <div class="col-lg-6">
                      <input class="form-control " id="password" name="password" type="password" readonly="readonly"/>
                    </div>
                  </div>
                  <div class="form-group ">
                    <label for="lastname" class="control-label col-lg-4">手机号</label>
                    <div class="col-lg-6">
                      <input class="form-control" id="usertel" name="usertel" type="text" readonly="readonly"/>
                    </div>
                  </div>
                  <div class="form-group">
                  	<label for="lastname" class="control-label col-lg-4">性别</label>
                  	<div class="col-lg-6">
	                    <div class="radio-inline col-lg-4">
							<label>
								<input type="radio" name="sex" id="sex" value="男">男
							</label>
						</div>
						<div class="radio-inline col-lg-4">
							<label>
								<input type="radio" name="sex" id="sex" value="女">女
							</label>
						</div>
					</div>
                  </div>
                  <div class="form-group ">
                    <label for="confirm_password" class="control-label col-lg-4">等级</label>
                    <div class="col-lg-6">
                      <select class="form-control" id="userlevel" name="userlevel">
                      	<option value="default">请选择</option>
						<option value="1">普通用户</option>
						<option value="2">管理员</option>
					  </select>
                    </div>
                  </div>
                  <div class="form-group ">
                    <label for="confirm_password" class="control-label col-lg-4">状态</label>
	                    <div class="col-lg-6">
	                      <select class="form-control" id="userstatus" name="userstatus">
	                      	<option value="default">请选择</option>
							<option value="0">禁用</option>
							<option value="1">启用</option>
						  </select>
	                    </div>
                  </div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" id="updatebtn">提交更改</button>
					</div>
				 </div>
				</form>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
	
		<!-- js placed at the end of the document so the pages load faster -->
		<script src="../lib/jquery/jquery.min.js"></script>

		<script src="../lib/bootstrap/js/bootstrap.min.js"></script>
		<script class="include" type="text/javascript" src="../lib/jquery.dcjqaccordion.2.7.js"></script>
		<script src="../lib/jquery.scrollTo.min.js"></script>
		<script src="../lib/jquery.nicescroll.js" type="text/javascript"></script>
		<script src="../lib/jquery.sparkline.js"></script>
		<!--common script for all pages-->
		<script src="../lib/common-scripts.js"></script>
		<script type="text/javascript" src="../lib/gritter/js/jquery.gritter.js"></script>
		<script type="text/javascript" src="../lib/gritter-conf.js"></script>
		<!--script for this page-->
		<script src="../lib/sparkline-chart.js"></script>
		<script src="../lib/zabuto_calendar.js"></script>
		<script type="text/javascript">
			//先声明一个全局遍历key
			var key="";
			$(function(){
				//进入页面发送ajax请求显示文章数据
				$.get("${pageContext.request.contextPath}/UserController",
						{
							op:"userByPage_ajax"
						},
						function(result){
							//将html拼接写成方法
							showData(result);
						},"json")
						
						//首页
						$(document).on("click",".first",function(){
							//发送ajax请求
							$.get("${pageContext.request.contextPath}/UserController",
								{
									op:"userByPage_ajax",
									pageNo:1,
									pageSize:10,
									titleLike:key
								},
								function(result){
									//将html拼接写成方法
									showData(result);
								},"json")
						})
						
						//末页
						$(document).on("click",".last",function(){
							var totalPage=$("#totalPage").text();
							//发送ajax请求
							$.get("${pageContext.request.contextPath}/UserController",
								{
									op:"userByPage_ajax",
									pageNo:totalPage,
									pageSize:10,
									titleLike:key
								},
								function(result){
									//将html拼接写成方法
									showData(result);
								},"json")
						})
						//下一页
						$(document).on("click",".next",function(){
							var pageNo=$("#PageNo").text();
							//发送ajax请求
							$.get("${pageContext.request.contextPath}/UserController",
								{
									op:"userByPage_ajax",
									pageNo:(parseInt(pageNo))+1,
									pageSize:10,
									titleLike:key
								},
								function(result){
									//将html拼接写成方法
									showData(result);
								},"json")
						})
						//上一页
						$(document).on("click",".up",function(){
							var pageNo=$("#PageNo").text();
							//发送ajax请求
							$.get("${pageContext.request.contextPath}/UserController",
								{
									op:"userByPage_ajax",
									pageNo:(parseInt(pageNo))-1,
									pageSize:10,
									titleLike:key
								},
								function(result){
									//将html拼接写成方法
									showData(result);
								},"json")
						})
						
						//指定页
						$(document).on("click",".currentPage",function(){
							var pageNo=$(this).text();
							//发送ajax请求
							$.get("${pageContext.request.contextPath}/UserController",
								{
									op:"userByPage_ajax",
									pageNo:pageNo,
									pageSize:10,
									titleLike:key
								},
								function(result){
									//将html拼接写成方法
									showData(result);
								},"json")
						})
						
						//跳转
						$(document).on("click",".trunto",function(){
							var pageNo=$("#turntoId").text();
							//获取末页值
							var totalPage=$("#totalPage").text();
							//发送ajax请求
							$.get("${pageContext.request.contextPath}/UserController",
								{
									op:"userByPage_ajax",
									pageNo:pageNo,
									pageSize:10,
									titleLike:key
								},
								function(result){
									//将html拼接写成方法
									showData(result);
								},"json")
						})
						
						
			})
				function showData(result){
					//首先需要清空页面数据
					$("#userListBody").empty();
					$("#pageStyle").empty();
					$("#pageItem").empty();
					//显示文章数据列表
					$.each(result.data,function(index,user){
						var level="";
						var status="";
						if(user.u_level==1){
							level="<span class='label label-info label-mini'>普通用户</span>"
						}else{
							level="<span class='label label-warning label-mini'>管理员 </span>";
						}
						if(user.u_status==0){
							status="<span class='label label-danger label-mini'>禁用</span>";
						}else{
							status="<span class='label label-success label-mini'>启用</span>";
						}
		
						$("#userListBody").append("<tr>\r\n" + 
								"                    <td>"+user.u_id +"</td>\r\n" + 
								"                    <td>"+user.u_name +"</td>\r\n" + 
								"                    <td>"+user.u_password +"</td>\r\n" + 
								"                    <td>"+user.u_tel +"</td>\r\n" + 
								"                    <td>"+user.u_sex +"</td>\r\n" + 
								"                    <td>"+level+"</td>\r\n" + 
								"                    <td>"+status+"</td>\r\n" + 
								"                    <td><a href=\"\" data-toggle=\"modal\" data-target=\"#myModal\"\r\n" + 
								"									data-uid=\""+user.u_id +"\"\r\n" + 								
								"									data-uname=\""+user.u_name +"\"\r\n" + 
								"									data-upassword=\""+user.u_password +"\"\r\n" + 
								"									data-utel=\""+user.u_tel +"\"\r\n" + 
								"									data-usex=\""+user.u_sex +"\"\r\n" + 
								"									data-ulevel=\""+user.u_level +"\"\r\n" + 
								"									data-ustatus=\""+user.u_status +"\" onclick=\"showUpdateData(this)\">\r\n" + 
								"                      <button class=\"btn btn-primary btn-xs\"><i class=\"fa fa-pencil\"></i></button>\r\n</a>" + 
								"                      <button class=\"btn btn-danger btn-xs\"><i class=\"fa fa-trash-o \"></i></button>\r\n" + 
								"                    </td>\r\n" + 
								"                  </tr>")
					})
					$("#pageStyle").append("当前第<span id='pageNo'>"+result.pageNo+"</span>页/共<span id='totalPage'>"+result.totalPage+ "</span>页/每页显示<span id='pageSize'>"+result.pageSize+"</span>条/共<span id='totalCount'>"+result.totalCount+"</span>条数据");
					//首页和上一页
					if(result.pageNo==1){
						$("#pageItem").append("<li class='disabled'><a href='#'>首页</a></li><li class='disabled'><a href='#'>&laquo;</a></li>");
					}else{
						$("#pageItem").append("<li><a href='#' class='first'>首页</a></li><li><a href='#' class='up'>&laquo;</a></li>");
					}
					//分页栏
					for(var i=1;i<=result.totalPage;i++){
						if(i==result.pageNo){
							$("#pageItem").append("<li class='active'><a href='#'>"+i+"</a></li>");
						}else{
							$("#pageItem").append("<li><a href='#' class='currentPage'>"+i+"</a></li>");
						}
					}
					//下一页和末页
					if(result.pageNo==result.totalPage){
						$("#pageItem").append("<li class='disabled'><a href='#'>&raquo;</a></li><li class='disabled'><a href='#'>末页</a></li>");
					}else{
						$("#pageItem").append("<li><a href='#' class='next'>&raquo;</a></li><li><a href='#' class='last'>末页</a></li>");
					}
					//跳转页
					$("#pageItem").append("<li><a href='#' id='turntoId'><input type='number' value='"+result.pageNo+"' min='1' max='"+result.totalPage+"' style='width: 40px;height: 20px' /></a></li>");
					$("#pageItem").append("<li><a href='#' class='turnto'>跳转</a></li>");
				}
			   //在模态框显示要修改的数据
				function showUpdateData(obj) {
				    var uid = $(obj).data("uid");
					var uname = $(obj).data("uname");
					var upassword = $(obj).data("upassword");
					var utel = $(obj).data("utel");
					var usex = $(obj).data("usex");
					var ulevel = $(obj).data("ulevel");
					var ustatus = $(obj).data("ustatus");
					//显示
					$("#userid").val(uid);
					$("#username").val(uname);
					$("#password").val(upassword);
					$("#usertel").val(utel);
					$("#sex").val();
					//性别不可修改
					$("#sex").attr('onClick','javascript:return false');
					$("#userlevel").val(ulevel);
					$("#userstatus").val(ustatus);
				}
			   //模态框提交修改的监听事件
			   $("#updatebtn").click(function(){
				   $("#sex").each(function(){
					   if(this.checked){
						   console.log(this.value) 
					   }
					   
				   })
				   //创建对象存放修改后的数据
				   var user={
						    u_id:$("#userid").val(),
						    u_name:$("#username").val(),
							u_password:$("#password").val(),
							u_tel:$("#usertel").val(),
							u_sex:$("#sex").val(),
							u_level:$("#userlevel").val(),
							u_status:$("#userstatus").val(),   
				   };
				   //发送ajax修改操作
				   $.get("${pageContext.request.contextPath}/UserController",
						{
							op:"updateUser",
							user:JSON.stringify(user)
						},
						function(flag){
							if(flag){
								//关闭模态框
								$("#myModal").modal('hide');
								//刷新数据,发送ajax请求,显示当前页
								$.get("${pageContext.request.contextPath}/UserController",
									{
										op:"userByPage_ajax",
										pageNo:$("#pageNo").text(),
										pageSize:10,
										titleLike:key
									},
									function(result){
										//将html拼接写成方法
										showData(result);
									},"json")
							}else{
								alert("修改失败")
							}
						},"json")
	
			   })
		</script>
	</body>

</html>